<template>


  <a-card :bordered="false">
    <a-table
      ref="table"
      size="default"
      style="width: 75%;float: right"
      :columns="columns"
      :dataSource="tableData"
      :showAlertInfo="true"

    >
         <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)"><a-icon type="edit" />编辑</a>
                <a-divider type="vertical"/>
              <a  style="color: red;">
                   <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" okText="确定" cancelText="取消">
                           <a-icon type="delete" />删除
                    </a-popconfirm>
              </a>

            </span>
    </a-table>
    <a-menu
      @click="handleClick"
      style="width: 20%"
      :defaultSelectedKeys="['1']"
      :openKeys.sync="openKeys"
      mode="inline"
    >
      <a-menu-item :key="index" v-for="(item,index) in typeListData" @click="getTableData(item.id)">{{item.name}}</a-menu-item>
      <!--<a-sub-menu key="sub1" @titleClick="titleClick">
        <span slot="title">Navigation One</span>

      </a-sub-menu>-->

    </a-menu>


    <a-modal
      title="编辑"
      width="50%"
      v-model="visible"
      @ok="saveFormData"
    >
      <div>
        名称：<a-input
        placeholder="请输入名称"
        maxlength="50"
        style="width: 90%"
        autocomplete="off"
        v-model="dictionaryFormData.name"/>
      </div>
    </a-modal>



  </a-card>

</template>

<script>

  import ATextarea from "ant-design-vue/es/input/TextArea"
  import AInput from "ant-design-vue/es/input/Input"

  import {getRoleList, getServiceList} from '@/api/manage'

  import indexedDB from '../../db/db'


  export default {
    name: "dirctionaryList",
    components: {
      AInput,
      ATextarea,


    },
    data() {
      return {
        current: ['mail'],
        openKeys: ['sub1'],
        detailBool:false,
        visible: false,
        searchText:"",
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        },
        dictionaryFormData:{},
// 表头
        columns: [
          {
            title: '类型名称',
            dataIndex: 'type_name',

          },
          {
            title: '名称',
            dataIndex: 'name',

          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: {customRender: 'action'},
          },
        ],

        // 高级搜索 展开/关闭
        advanced: true,

        //数据库
        tableData: [],
        typeListData: [],
      }
    },
    created() {
      getRoleList({t: new Date()})
    },
    watch: {
      openKeys (val) {
        console.log('openKeys', val)
      },
    },
    mounted() {
      indexedDB.initDB()
      // indexedDB.batInit('landResource', landResource);// 初始化数据
      this.getlandResourceList()
    },
    methods: {
      handleClick (e) {
        console.log('click', e)
      },

      getlandResourceList() {
        let that = this
        this.visible = false;
        indexedDB.handleDataByCursor('dictionaryType').then(res => {

          if (res.length > 0) {
            that.typeListData = res
            that.getTableData(that.typeListData[0].id)
          }
        })
      },
      getTableData(val) {
        let that = this
        this.visible = false;
        this.searchText = val;
        indexedDB.handleDataByIndex('dictionary', val,'type_id').then(res => {
          if (res.length > 0) {
            that.tableData = res
          }
        })
      },

      handleEdit(record) {
        this.visible = true
        this.dictionaryFormData = Object.assign({}, record);
      },

      handleDelete(record) {
        indexedDB.delete({name:"dictionary"},record.id).then((res)=>{
          if(res==true){
            this.$message.error("删除成功！");
            this.getTableData(this.searchText)
          }else{
            this.$message.error("删除失败！");
          }
        })
      },





      saveFormData(){
        let _this = this
         if(_this.dictionaryFormData.name == "") {_this.$message.info("请输入名称"); return;}
            indexedDB.update({name:"dictionary"},_this.dictionaryFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("保存成功");
                _this.dictionaryFormData = {};
                _this.getTableData(_this.searchText)
              }else{
                _this.$message.error("保存失败！");
              }
            });


      },



    },

  }
</script>